<script setup lang="ts">

</script>

<!--导航栏-->
<template>
  <div class="radio-input ">
    <label>
      <input type="radio" id="value-1" name="value-radio" value="value-1">
      <span>SHOP</span>
    </label>
    <label>
      <input type="radio" id="value-2" name="value-radio" value="value-2">
      <span>VIDEOS</span>
    </label>
    <label>
      <input type="radio" id="value-3" name="value-radio" value="value-3">
      <span>OUR STORY</span>
    </label>
    <label>
      <input type="radio" id="value-3" name="value-radio" value="value-4">
      <span>FAQ</span>
    </label>
    <label>
      <input type="radio" id="value-3" name="value-radio" value="value-5">
      <span>CONTACT US</span>
    </label>
    <span class="selection"></span>
  </div>
</template>

<style scoped>

.radio-input input {
  display: none;
}

.radio-input {
  --container_width: 600px;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 12px;
  background-color: #F5F4F2;
  color: #000000;
  width: var(--container_width);
  overflow: hidden;
  border: 0px solid rgba(53, 52, 52, 0.226);
}

.radio-input label {
  width: 100%;
  padding: 20px 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  font-weight: 600;
  letter-spacing: -1px;
  font-size: 14px;
}

.selection {
  display: none;
  position: absolute;
  height: 100%;
  width: calc(var(--container_width) / 5);
  z-index: 0;
  left: 0;
  top: 0;
  transition: .15s ease;
}

.radio-input label:has(input:checked) {
  color: #fff;
}

.radio-input label:has(input:checked) ~ .selection {
  background-color: #786554;
  display: inline-block;
}

.radio-input label:nth-child(1):has(input:checked) ~ .selection {
  transform: translateX(calc(var(--container_width) * 0 / 5));
}

.radio-input label:nth-child(2):has(input:checked) ~ .selection {
  transform: translateX(calc(var(--container_width) * 1 / 5));
}

.radio-input label:nth-child(3):has(input:checked) ~ .selection {
  transform: translateX(calc(var(--container_width) * 2 / 5));
}

.radio-input label:nth-child(4):has(input:checked) ~ .selection {
  transform: translateX(calc(var(--container_width) * 3 / 5));
}

.radio-input label:nth-child(5):has(input:checked) ~ .selection {
  transform: translateX(calc(var(--container_width) * 4 / 5));
}
</style>